<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas对象的ToDataUrl方法示例</title>
</head>
<body>
<canvas id="canvas" width="5" height="6"></canvas>

</body>
<script>
    var canvas = document.getElementById("canvas");
    var dataUrl = canvas.toDataURL();
    console.log(dataUrl);
    //
    /*
    这个格式被称为Data URLs,可以直接键入浏览器url里，以默认格式png的形式展示图片
    不过由于canvas里并没有非透明元素，所以直接浏览是看不出什么的，可以用比较画面丰富的canvas元素的Data URLs来进行浏览
     */
    //全质量 
    var fullQuality = canvas.toDataURL('image/jpeg',1);
    //半质量 
    var mediumQuality = canvas.toDataURL('image/jpeg',0.5);
    //低质量 
    var lowQuality = canvas.toDataURL('image/webp',0.1);

</script>
</html>